<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            padding: 12px;
        }
        .f1{
            background-color: coral;
        }
        .f2{
            background-color: rgb(214, 250, 12);
        }
        .f3{
            background-color: rgb(10, 222, 250);
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- v-show做渲染，不显示但结构还在，节点不会频繁删除，没有效率问题 -->
        <div v-show="false">{{name}}</div>
        <!-- v-if做渲染，不显示且结构也不在了，节点会频繁删除，有效率问题，适合频率低的使用 -->
        <div v-if="false">{{name}}</div>
        <!-- 但是v-if结合v-else-if，可以跳过下面的v-else-if的判断也是一个很节省的写法 -->
        <!-- 多个判断在一起时，推荐用v-if 和 v-else-if -->
        <div v-else-if="false">{{name}}</div>
        <div v-else-if="false">{{name}}</div>
        <!-- 如果前面都没有命中的话，则直接使用v-else的内容 -->
        <div v-else>{{name}}</div>
        <!-- 中间不能有任何打断 -->
        <div v-if="false">{{name}}</div>
        <div>@@@</div>
        <!-- 下面的被打断后报错，没有对应的v-if -->
        <div v-else-if="false">{{name}}</div>
        <!-- 按住alt能选中多行 -->
        <!-- template只能和v-if配合使用。渲染后template不在页面上展示。只展示里面的内容 -->
        <template v-if="true">
            <h1>aaa</h1>
        </template>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'zzz1'
            },
            computed:{
            },
            methods:{
            },
            watch:{
            },
        })
    </script>    
</body>
</html>